<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统管理 - 消防工程集团经营管理系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background: #f3f4f6;
        }
    </style>
</head>
<body>
    <!-- Sidebar -->
    <div class="fixed left-0 top-0 bottom-0 w-64 bg-gray-900 text-white shadow-lg">
        <div class="p-6 border-b border-gray-800">
            <div class="flex items-center">
                <i class="fas fa-fire-extinguisher text-2xl text-blue-400 mr-3"></i>
                <div>
                    <div class="font-bold text-lg">消防工程集团</div>
                    <div class="text-xs text-gray-400">管理系统</div>
                </div>
            </div>
        </div>
        <nav class="p-4 space-y-2">
            <a href="dashboard.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-chart-line w-5 mr-3"></i>
                <span>数据看板</span>
            </a>
            <a href="project-list.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-building w-5 mr-3"></i>
                <span>项目管理</span>
            </a>
            <a href="purchase-list.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-shopping-cart w-5 mr-3"></i>
                <span>采购管理</span>
            </a>
            <a href="payment-list.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-money-bill-wave w-5 mr-3"></i>
                <span>付款管理</span>
            </a>
            <a href="inventory.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-warehouse w-5 mr-3"></i>
                <span>库存管理</span>
            </a>
            <a href="hr-dashboard.html" class="flex items-center px-4 py-3 text-gray-300 hover:bg-gray-800 rounded-lg">
                <i class="fas fa-users w-5 mr-3"></i>
                <span>人力成本</span>
            </a>
            <a href="system-settings.html" class="flex items-center px-4 py-3 bg-blue-600 rounded-lg text-white">
                <i class="fas fa-cog w-5 mr-3"></i>
                <span>系统管理</span>
            </a>
        </nav>
    </div>

    <!-- Main Content -->
    <div class="ml-64">
        <header class="bg-white shadow-sm border-b border-gray-200 px-8 py-4">
            <h1 class="text-2xl font-bold text-gray-800">系统管理</h1>
        </header>

        <main class="p-8">
            <!-- Tabs -->
            <div class="bg-white rounded-lg shadow-sm mb-6">
                <div class="border-b border-gray-200">
                    <div class="flex">
                        <a href="employee-management.html" class="px-6 py-4 border-b-2 border-blue-600 text-blue-600 font-semibold">员工信息</a>
                        <a href="role-management.html" class="px-6 py-4 text-gray-600 hover:text-gray-800">用户角色</a>
                        <button class="px-6 py-4 text-gray-600 hover:text-gray-800">用户管理</button>
                        <button class="px-6 py-4 text-gray-600 hover:text-gray-800">字典配置</button>
                        <button class="px-6 py-4 text-gray-600 hover:text-gray-800">系统配置</button>
                        <button class="px-6 py-4 text-gray-600 hover:text-gray-800">日志管理</button>
                    </div>
                </div>

                <!-- Quick Links -->
                <div class="p-6">
                    <div class="grid grid-cols-2 gap-6 mb-6">
                        <a href="employee-management.html" class="bg-gradient-to-br from-blue-50 to-blue-100 border-2 border-blue-200 rounded-xl p-6 hover:shadow-lg transition-all">
                            <div class="flex items-center mb-3">
                                <div class="w-12 h-12 bg-blue-500 rounded-full flex items-center justify-center mr-4">
                                    <i class="fas fa-user-tie text-white text-xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-bold text-gray-900">员工信息管理</h3>
                                    <p class="text-sm text-gray-600">管理员工基础信息</p>
                                </div>
                            </div>
                            <div class="text-sm text-gray-500">查看、编辑、新增员工信息</div>
                        </a>
                        <a href="role-management.html" class="bg-gradient-to-br from-purple-50 to-purple-100 border-2 border-purple-200 rounded-xl p-6 hover:shadow-lg transition-all">
                            <div class="flex items-center mb-3">
                                <div class="w-12 h-12 bg-purple-500 rounded-full flex items-center justify-center mr-4">
                                    <i class="fas fa-user-shield text-white text-xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-lg font-bold text-gray-900">用户角色管理</h3>
                                    <p class="text-sm text-gray-600">配置角色和权限</p>
                                </div>
                            </div>
                            <div class="text-sm text-gray-500">管理角色权限配置</div>
                        </a>
                    </div>
                    
                    <div class="border-t border-gray-200 pt-6">
                        <div class="flex items-center justify-between mb-4">
                            <div>
                                <h3 class="text-lg font-semibold text-gray-800">系统用户管理</h3>
                                <p class="text-sm text-gray-500 mt-1">管理系统登录账号，每个用户账号关联一个员工和一个角色</p>
                            </div>
                            <button onclick="showAddUserModal()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
                                <i class="fas fa-plus mr-2"></i>新增用户账号
                            </button>
                        </div>
                        <div class="mb-4">
                            <input type="text" placeholder="搜索工号、姓名、角色..." 
                                   class="w-full border border-gray-300 rounded-lg px-4 py-2">
                        </div>
                    </div>
                    <table class="w-full">
                        <thead class="bg-gray-50">
                            <tr>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600">工号</th>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600">姓名</th>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600">岗位</th>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600">系统角色</th>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600">所属子公司</th>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600">所属项目</th>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600">账号状态</th>
                                <th class="px-4 py-3 text-left text-xs font-semibold text-gray-600">操作</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200">
                            <tr>
                                <td class="px-4 py-3 text-sm text-gray-900">E001234</td>
                                <td class="px-4 py-3 text-sm text-gray-900">张工</td>
                                <td class="px-4 py-3 text-sm text-gray-700">
                                    <span class="text-xs text-gray-500">岗位：</span>项目经理
                                </td>
                                <td class="px-4 py-3">
                                    <span class="bg-blue-100 text-blue-600 text-xs px-2 py-1 rounded">项目经理角色</span>
                                </td>
                                <td class="px-4 py-3 text-sm text-gray-700">子公司A</td>
                                <td class="px-4 py-3 text-sm text-gray-700">消防工程A项目</td>
                                <td class="px-4 py-3">
                                    <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded">启用</span>
                                </td>
                                <td class="px-4 py-3">
                                    <a href="#" class="text-blue-600 hover:text-blue-800 text-sm mr-3">编辑</a>
                                    <a href="#" class="text-gray-600 hover:text-gray-800 text-sm mr-3">重置密码</a>
                                    <a href="#" class="text-red-600 hover:text-red-800 text-sm">禁用</a>
                                </td>
                            </tr>
                            <tr>
                                <td class="px-4 py-3 text-sm text-gray-900">E001235</td>
                                <td class="px-4 py-3 text-sm text-gray-900">李工</td>
                                <td class="px-4 py-3 text-sm text-gray-700">
                                    <span class="text-xs text-gray-500">岗位：</span>采购员
                                </td>
                                <td class="px-4 py-3">
                                    <span class="bg-orange-100 text-orange-600 text-xs px-2 py-1 rounded">采购员角色</span>
                                </td>
                                <td class="px-4 py-3 text-sm text-gray-700">子公司B</td>
                                <td class="px-4 py-3 text-sm text-gray-700">消防工程B项目</td>
                                <td class="px-4 py-3">
                                    <span class="bg-green-100 text-green-600 text-xs px-2 py-1 rounded">启用</span>
                                </td>
                                <td class="px-4 py-3">
                                    <a href="#" class="text-blue-600 hover:text-blue-800 text-sm mr-3">编辑</a>
                                    <a href="#" class="text-gray-600 hover:text-gray-800 text-sm mr-3">重置密码</a>
                                    <a href="#" class="text-red-600 hover:text-red-800 text-sm">禁用</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- System Config -->
            <div class="bg-white rounded-lg shadow-sm p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">系统配置</h3>
                <div class="space-y-4">
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <div>
                            <div class="font-semibold text-gray-800">考勤地址范围</div>
                            <div class="text-sm text-gray-500 mt-1">设置项目打卡地理围栏半径（米）</div>
                        </div>
                        <input type="number" value="100" class="w-24 border border-gray-300 rounded-lg px-3 py-2">
                    </div>
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <div>
                            <div class="font-semibold text-gray-800">低库存预警阈值</div>
                            <div class="text-sm text-gray-500 mt-1">库存低于此值将触发预警</div>
                        </div>
                        <input type="number" value="20" class="w-24 border border-gray-300 rounded-lg px-3 py-2">
                    </div>
                    <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                        <div>
                            <div class="font-semibold text-gray-800">流程超时提醒时间</div>
                            <div class="text-sm text-gray-500 mt-1">审批流程超过此时间未处理将提醒（小时）</div>
                        </div>
                        <input type="number" value="24" class="w-24 border border-gray-300 rounded-lg px-3 py-2">
                    </div>
                    <button class="w-full bg-blue-600 text-white px-4 py-3 rounded-lg hover:bg-blue-700">
                        <i class="fas fa-save mr-2"></i>保存配置
                    </button>
                </div>
            </div>
        </main>
    </div>

    <!-- Add User Modal -->
    <div id="addUserModal" class="hidden fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
            <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900">新增用户账号</h3>
                <button onclick="closeAddUserModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times text-xl"></i>
                </button>
            </div>
            <div class="p-6">
                <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-4 rounded">
                    <div class="flex items-start">
                        <i class="fas fa-info-circle text-blue-600 mt-1 mr-2"></i>
                        <div class="text-sm text-gray-700">
                            <div class="font-semibold mb-1">说明：</div>
                            <div>用户账号必须关联一个已存在的员工。系统角色用于审批流程配置和权限控制。</div>
                        </div>
                    </div>
                </div>
                <form id="userForm" class="space-y-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">选择员工 <span class="text-red-500">*</span></label>
                        <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">请选择员工（工号-姓名）</option>
                            <option value="E001234">E001234 - 张工（项目经理）</option>
                            <option value="E001235">E001235 - 李工（采购员）</option>
                            <option value="E001236">E001236 - 王工（施工员）</option>
                        </select>
                        <div class="text-xs text-gray-500 mt-1">仅显示未创建系统账号的员工</div>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">用户名 <span class="text-red-500">*</span></label>
                            <input type="text" placeholder="自动填充工号或手动输入" 
                                   class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                        <div>
                            <label class="block text-sm font-semibold text-gray-700 mb-2">初始密码 <span class="text-red-500">*</span></label>
                            <input type="password" placeholder="请输入初始密码" 
                                   class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">系统角色 <span class="text-red-500">*</span></label>
                        <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="">请选择系统角色</option>
                            <option value="admin">系统管理员</option>
                            <option value="pm">项目经理角色</option>
                            <option value="purchaser">采购员角色</option>
                            <option value="finance">财务人员角色</option>
                            <option value="employee">普通员工角色</option>
                        </select>
                        <div class="text-xs text-gray-500 mt-1">角色用于审批流程配置和权限控制</div>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-2">账号状态</label>
                        <select class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <option value="active">启用</option>
                            <option value="inactive">禁用</option>
                        </select>
                    </div>
                </form>
            </div>
            <div class="sticky bottom-0 bg-gray-50 border-t border-gray-200 px-6 py-4 flex items-center justify-end gap-3">
                <button onclick="closeAddUserModal()" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100">
                    取消
                </button>
                <button onclick="saveUser()" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                    保存
                </button>
            </div>
        </div>
    </div>

    <script>
        function showAddUserModal() {
            document.getElementById('addUserModal').classList.remove('hidden');
        }

        function closeAddUserModal() {
            document.getElementById('addUserModal').classList.add('hidden');
            document.getElementById('userForm').reset();
        }

        function saveUser() {
            // Save logic here
            alert('用户账号创建成功！');
            closeAddUserModal();
        }
    </script>
</body>
</html>

